
function addOnClickHandlers() {
	// id 속성 값으로 Element를 찾아서 반환
	var cdsDiv = document.getElementById("cds");
	
	// <div id="cds">의 자식 엘리먼트들 중 태그 이름이 "img"인 것을 모두 반환해 줌
	var cdImages = cdsDiv.getElementsByTagName("img");
	for (var i = 0; i < cdImages.length; i++) {
		var cdImage = cdImages[i];
		cdImage.onclick = addToTop5;
	}
}

function addToTop5() {
	var imgElement = this;
	var top5Element = document.getElementById("top5");
	var numCDs = 0;
	
	for (var i = 0; i < top5Element.childNodes.length; i++) {
		if (top5Element.childNodes[i].nodeType == Node.ELEMENT_NODE &&
				top5Element.childNodes[i].nodeName.toLowerCase() == "img") {
			numCDs++;
		}
	}
	
	if (numCDs < 5) {
		top5Element.appendChild(imgElement);
		imgElement.onclick = null;
		
		var newSpanElement = document.createElement("span");
		newSpanElement.className = "rank";
		var newTextNode = document.createTextNode(numCDs + 1);
		newSpanElement.appendChild(newTextNode);
		
		top5Element.insertBefore(newSpanElement, imgElement);
	} else {
		alert("You've already choose 5 CDs.");
	}
}

// Top5 CDs를 모두 cds 엘리먼트로 되돌림
function startOver() {
	var top5Element = document.getElementById("top5");
	var cdsElement = document.getElementById("cds");
	
	while (top5Element.hasChildNodes()) {
		var childElement = top5Element.firstChild;
		if (childElement.nodeType == Node.ELEMENT_NODE &&
				childElement.nodeName.toLowerCase() == "img") {
			cdsElement.appendChild(childElement);
		} else {
			top5Element.removeChild(childElement);
		}
	}
	
	addOnClickHandlers();
}





















